import '@antv/x6-vue-shape'
import OtherNode from './OtherNode'
export default class EventController {

  constructor(x6BaseGraph) {
    this.x6BaseGraph = x6BaseGraph
    this.graph = x6BaseGraph.graph
  }

  toggleTooltip(visible) {
    this.graph.addNode({
      shape: 'vue-shape',
      // 注意调整一下坐标
      x: 100,
      y: 100,
      width: 1000,
      height: 1000,
      // attrs: {
      //   body: {
      //     stroke: '#ebebeb'
      //   }
      // },
      component: {
        template: '<other-node :pnode="visible"></other-node>',
        data: {
          visible,
        },
        components: {
          OtherNode
        }
      }
    })
  }

  changePortsVisible = (visible) => {
    const ports = document.getElementById('refContainer').querySelectorAll(
      '.x6-port-body',
    )
    for (let i = 0, len = ports.length; i < len; i = i + 1) {
      ports[i].style.visibility = visible ? 'visible' : 'hidden'
    }
  }

  registerEvent = (events) => {
    events &&
      events.forEach((event) => {
        switch (event.eventName) {
          // case 'edge:click': {
          //   this.graph.on('edge:click', ({ view, e }) => {
          //     e.stopPropagation()
          //     view.cell.remove()
          //   })
          //   break
          // }
          // case 'cell:added': {
          //   this.graph.on('cell:added', ({ cell, index, options }) => {
          //   })
          //   break
          // }
          case 'edge:dblclick': {
            this.graph.on('edge:dblclick', ({ cell }) => {
              console.log('cell', cell)
              // e.stopPropagation()
              cell.remove()
              this.toggleTooltip(cell.store.data)
            })
            break
          }
          case 'node:mouseenter': {
            this.graph.on('node:mouseenter', () => {
              this.changePortsVisible(true)
            })
          }

          case 'node:mouseleave': {
            this.graph.on('node:mouseleave', () => {
              this.changePortsVisible(false)
            })
          }
          case 'cell:mouseleave': {
            this.graph.on('cell:mouseleave', ({ cell }) => {
              cell.removeTools()
            })
          }
          case 'cell:mouseenter': {
            this.graph.on('cell:mouseenter', ({ cell }) => {
              cell.addTools([
                {
                  name: "button-remove",
                  args: { distance: 40 },
                },
              ])
            })
          }



          // case 'scale': {
          //   this.graph.on('scale', ({ sx, sy, ox, oy }) => {
          //     const scale = sx
          //     event.handler && event.handler({ scale })
          //   })
          //   break
          // }
          // case 'graph:mouseenter': {
          //   this.graph.on('graph:mouseenter', ({ e }) => {
          //     event.handler && event.handler()
          //   })
          //   break
          // }
          // case 'graph:mouseleave': {
          //   this.graph.on('graph:mouseleave', ({ e }) => {
          //     event.handler && event.handler()
          //   })
          //   break
          // }
          // case 'blank:mouseDown': {
          //   this.graph.on('blank:mousedown', ({ e, x, y }) => {
          //     event.handler && event.handler({ x, y })
          //   })
          //   break
          // }
          // case 'blank:mouseUp': {
          //   this.graph.on('blank:mouseup', ({ e, x, y }) => {
          //     event.handler && event.handler({ x, y })
          //   })
          //   break
          // }
          // case 'node:added': {
          //   this.graph.on('node:added', ({ node }) => {
          //     console.log('add', node)
          //     // if (!this.x6BaseGraph.isDataDrivenUpdate) {
          //     //   event.handler && event.handler({ node });
          //     // }
          //     this.x6BaseGraph.bringNodesToFront([node])
          //   })
          //   break
          // }
          // case 'edge:added': {
          //   this.graph.on('node:added', ({ node }) => {
          //     console.log('add', node)
          //     // if (!this.x6BaseGraph.isDataDrivenUpdate) {
          //     //   event.handler && event.handler({ node });
          //     // }
          //     this.x6BaseGraph.bringNodesToFront([node])
          //   })
          //   break
          // }
          // case 'node:removed': {
          //   this.graph.on('node:removed', ({ node }) => {
          //     // if (!this.x6BaseGraph.isDataDrivenUpdate) {
          //     //   event.handler && event.handler({ node })
          //     // }
          //   })
          //   break
          // }
          // case 'edge:added': {
          //   this.graph.on('edge:added', ({ edge }) => {
          //     // if (!this.x6BaseGraph.isDataDrivenUpdate) {
          //     //   event.handler && event.handler({ edge })
          //     // }
          //     // this.x6BaseGraph.bringCellsToBack([edge])
          //   })
          //   break
          // }
          // case 'node:mousedown': {
          //   this.graph.on('node:mousedown', ({ e, view, x, y }) => {
          //     event.handler && event.handler({ node: view.cell, x, y })
          //   })
          //   break
          // }
          // case 'node:mousemove': {
          //   this.graph.on('node:mousemove', ({ e, view, x, y }) => {
          //     event.handler && event.handler({ node: view.cell, x, y })
          //   })
          //   break
          // }
          // case 'node:mouseup': {
          //   this.graph.on('node:mouseup', ({ e, view, x, y }) => {
          //     event.handler && event.handler({ node: view.cell, x, y })
          //   })
          //   break
          // }
          // case 'node:click': {
          //   this.graph.on('node:click', ({ view }) => {
          //     event.handler && event.handler({ node: view.cell })
          //   })
          //   break
          // }
          // case 'node:dbclick': {
          //   this.graph.on('node:dblclick', ({ view }) => {
          //     event.handler && event.handler({ node: view.cell })
          //   })
          //   break
          // }
          // case 'edge:connected': {
          //   this.graph.on('edge:connected', ({ edge }) => {
          //     // if (!this.x6BaseGraph.isDataDrivenUpdate) {
          //     //   // 拖拽连线过程中画布会出现一条连线, 该连线无实际业务含义, 需要删除
          //     //   if (!edge.data && edge.id.toString().startsWith('cell-', 0)) {
          //     //     this.isDeleteX6DefaultEdge = true;
          //     //     this.graph.removeCells([edge]);
          //     //     this.isDeleteX6DefaultEdge = false;
          //     //   }
          //     //   event.handler && event.handler({ edge });
          //     // }
          //   })
          //   break
          // }
          // case 'selection:changed': {
          //   this.graph.on(
          //     'cell:change:*',
          //     ({ selected, removed, added }) => {
          //       console.log(selected)
          //       // event.handler && event.handler({ selected, removed, added })
          //       // this.x6BaseGraph.bringCellsToFront(selected)
          //     }
          //   )
          //   break
          // }
          default: {
            break
          }
        }
      })
  };
}
